<template>
  <div id="project">
    <div class="t_header">
      <el-button type="primary" @click="addProject">新增项目</el-button>
      <el-dialog
        title="新增项目"
        width="50%"
        :visible.sync="addProjectDialogVisible"
        destroy-on-close
      >
        <el-form :model="addProjectForm" label-width="15%" ref="addProjectForm">
          <el-form-item label="项目名称" prop="pjname">
            <el-input
              v-model="addProjectForm.pjname"
              autocomplete="off"
              placeholder="输入项目名称，不能重复"
              style="width: 70%"
            ></el-input>
          </el-form-item>

          <el-form-item label="项目编码" prop="pjcode">
            <el-input
              v-model="addProjectForm.pjcode"
              autocomplete="off"
              placeholder="输入项目编码，不能重复"
              style="width: 70%"
            ></el-input>
          </el-form-item>

          <el-form-item label="项目管理员" prop="pjmanager">
            <el-input
              v-model="addProjectForm.pjmanager"
              autocomplete="off"
              placeholder="输入管理员"
              style="width: 70%"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目描述" prop="pjdesc">
            <el-input
              type="textarea"
              v-model="addProjectForm.pjdesc"
              style="width: 70%"
              :rows="5"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <div class="pjsubmit">
              <el-button type="primary" @click="submitAddPjForm()"
                >立即创建</el-button
              >
              <el-button @click="resetForm('addProjectForm')">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <el-table :data="projectList" border style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        :index="table_index"
        align="center"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="pjname"
        label="项目名称"
        width="250"
      ></el-table-column>
      <el-table-column prop="pjcode" label="项目编码" width="120">
      </el-table-column>
      <el-table-column
        prop="pjmanager"
        label="项目责任人"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="pjmanager"
        label="创建人"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="createtime"
        label="创建时间"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="pjdesc"
        label="备注信息"
        align="center"
        width="300"
      >
      </el-table-column>

      <el-table-column fixed="right" label="操作" align="center" width="300">
        <template #default="scope">
          <el-button @click="tedit = true" type="primary" size="small">
            详情
          </el-button>
          <el-button @click="tdetail = true" type="primary" size="small">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import common from "@/api/common";

export default {
  name: "tmplist",
  // components: {
  //   ExeTemp,
  // },
  // props: {
  //   value: String,
  //   language: {
  //     type: String,
  //     default: null,
  //   },
  // },

  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      addProjectDialogVisible: false,
      projectList: new Array(),
      addProjectForm: {
        pjname: "",
        pjcode: "",
        pjmanager: "",
        pjdesc: "",
      },
    };
  },
  created: function () {
    this.getPorjectList();
  },

  methods: {
    sucessInfo(msg) {
      this.$notify({
        title: "成功",
        message: msg,
        type: "success",
      });
    },
    errorInfo(msg) {
      this.$notify.error({
        title: "错误",
        message: msg,
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getTempList(this.pageSize, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTempList(this.pageSize, this.currentPage);
    },

    addProject: function () {
      this.addProjectDialogVisible = true;
    },
    getPorjectList(pageSize = this.pageSize, currentPage = this.currentPage) {
      axios({
        method: "GET",
        url:
          "/sqltemplate/projectinfo?pagesize=" +
          pageSize +
          "&currentpage=" +
          currentPage,
        withCredentials: true,
      }).then((res) => {
        if (common.checkIsLogin(res)) {
          this.projectList = res.data.data;
          this.total = res.data.count;
        } else {
          this.errorInfo(res.data.msg);
        }
      });
    },
    submitAddPjForm() {
      const reqData = this.addProjectForm;
      if (
        (reqData.pjname == "") |
        (reqData.pjname == null) |
        (reqData.pjname == undefined)
      ) {
        this.errorInfo("项目名称不能为空");
        return false;
      }
      if (
        (reqData.pjcode == "") |
        (reqData.pjcode == null) |
        (reqData.pjcode == undefined)
      ) {
        this.errorInfo("项目编码不能为空");
        return false;
      }
      axios({
        method: "POST",
        url: "/sqltemplate/projectinfo",
        Headers: {
          "Content-Type": "multipart/form-data",
        },
        data: reqData,
        withCredentials: true,
      }).then((res) => {
        if (common.checkIsLogin(res)) {
          if (res.data.code != 1) {
            this.errorInfo("项目创建失败" + res.data.msg);
            return false;
          } else {
            this.sucessInfo("项目创建成功");
            this.addProjectDialogVisible = false;
            this.getPorjectList();
            this.resetForm("addProjectForm");
          }
        } else {
          this.errorInfo(res.data.msg);
        }
      });
    },

    table_index(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },
    onSubmit() {
      let formData = new FormData();
      for (var key in this.addTemplateForm) {
        formData.append(key, this.addTemplateForm[key]);
      }
      formData.append("script", this.code);
      axios({
        method: "post",
        url: "/sqltemplate/createtemplate",
        Headers: {
          "Content-Type": "multipart/form-data",
        },
        withCredentials: true,
        data: formData,
      }).then((res) => {
        if (common.checkIsLogin(res)) {
          if (res.data["sucess"] == 1) {
            this.success("模板新增成功");
            this.addTemplateFormDialog = false;
            this.getTempList();
            Object.assign(this.$data, this.$options.data());
          } else {
            this.errorInfo("项目创建事变" + res.data["msg"]);
          }
        } else {
          this.errorInfo(res.data.msg);
        }
      });
    },
  },
};
</script>

<style>
textarea {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.pjsubmit {
  margin-top: 50px;
  margin-left: 100px;
}
.t_header {
  margin-bottom: 10px;
}
.el-dialog__body {
  height: 55vh;
  overflow: auto;
}
.el-table__empty-block {
  min-height: 700px;
}
.el-table__body-wrapper {
  min-height: 700px;
}
</style>